<?php if(isset($type) && $type > -1){?>
<!-- bread crumb -->
<p id="bread-crumb">
	<a href="<?php echo site_url('publicreport');?>">Phân bổ theo nhóm</a>
	<?php echo ($type == 0 ? 'Noi bo' : 'Khach hang');?>
</p><!-- end bread crumb -->
<input type="hidden" id="group_type" name="group_type" value="<?php echo ($type == 0 ? 'noi_bo' : 'khach_hang');?>" />
<?php }?>
<?php if(!empty($data)){?>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" id="table" class="martop5 tbl-list">
        <tr>
            <th class="td-label bold text-center" width="20px">
                <p style="height:33px;line-height: 33px;" class="ver-middle">STT</p>
            </th>
            <th class="td-label bold text-center">
                <p style="height:33px;line-height: 33px;" class="ver-middle">Tên nhóm</p>
            </th>
            <th class="td-label bold text-right">
                <p style="height:33px;line-height: 33px;" class="ver-middle">Click</p>
            </th>
            <th class="td-label bold text-right">
                <p style="height:33px;line-height: 33px;" class="ver-middle">realClick</p>
            </th>
			 <th class="td-label bold text-right">
                <p style="height:33px;line-height: 33px;" class="ver-middle">clickCharge</p>
            </th>
            <th class="td-label bold text-right">
                <p style="height:33px;line-height: 33px;" class="ver-middle">View</p>
            </th>
            <th class="td-label bold text-right">
                <p style="height:33px;line-height: 33px;" class="ver-middle">CTR (%)</p>
            </th>
          </tr>
        <?php
        $stt = 0;
        $pieChartClick = array();	//tinh data pie chart view
        foreach($data as $k=>$v){
        	$link = '';
        	if($v['groupid'] > -1) $link = site_url('report/groupreport/?id='.$v['groupid'].'&fromdate='.$fromdate.'&todate='.$todate);
        	if($v['groupid'] == -1)
        	{
        		$stt = 0;	//Khoi tao lai STT cho cac nhom
        		$pieChartClick[] = "['".$v['groupname']."', ".($totalClick == 0 ? 0 : number_format(($v['click']/$totalClick)*100, 2))."]";	//Data cho pie chart
        	}
        ?>
          <tr <?php if($v['groupid'] == -1)echo 'style="background:#d6d6d6;font-weight:bold;"'; else echo 'class="row"';?>>
          	<?php if($v['groupid'] == -1){?>
          	<td colspan="2" class="ver-middle">
                <p class="pad5">
               		<?php echo $v['groupname'];?>
                </p>
            </td>
          	<?php } else { $stt++;?>
            <td class="ver-middle">
                <p class="pad5 text-center"><?php echo $stt;?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5">
                	<a href="<?php echo $link;?>" target="_blank">
                		<?php echo $v['groupname'];?>
                	</a>
                </p>
            </td>
            <?php }?>
            <td class="ver-middle">
                <p class="pad5 text-right price"><?php echo number_format($v['click']);?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-right price"><?php echo number_format($v['realclick']);?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-right price"><?php echo number_format($v['clickcharge']);?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-right price"><?php echo number_format($v['view']);?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-right price"><?php echo $v['ctr'];?></p>
            </td>
          </tr>
          <?php }?>
          <tr style="background:#d6d6d6;font-weight:bold;">
          	<td colspan="2" class="ver-middle">
                <p class="pad5">
               		<?php echo 'Không phải Muachung';?>
                </p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-right price"><?php echo number_format($exMcClick);?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-right price"><?php echo number_format($exMcRealClick);?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-right price"><?php echo number_format($exMcClickCharge);?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-right price"><?php echo number_format($exMcView);?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-right price"><?php echo number_format(($exMcRealClick/$exMcView)*100, 4);?></p>
            </td>
          </tr>
          <tfooter>
	          <tr>
	            <th class="td-label bold text-right" colspan="2">Tổng:</th>
	            <th class="td-label bold text-right">
	            	<?php echo number_format($totalClick);?>
	            </th>
	            <th class="td-label bold text-right">
	            	<?php echo number_format($totalRealClick);?>
	            </th>
				 <th class="td-label bold text-right">
				 	<?php echo number_format($totalClickCharge);?>
				 </th>
	            <th class="td-label bold text-right">
	            	<?php echo number_format($totalView);?>
	            </th>
	            <th class="td-label bold text-right">
	            	<?php echo number_format(($totalRealClick/$totalView)*100, 4);?>
	            </th>
	          </tr>
          </tfooter>
    </table>
<?php }?>
<?php if($fromdate == $todate){?>
<p class="text-right mar20">
	<b>So sánh clicks, impressions với ngày </b> 
	<input type="text" id="comparDate" size="15" class="input-time" />
	&nbsp;<img id="loading33" src="/images/ajaxLoading.gif" class="martop5 ver-middle" style="display: none;"/>
</p>
<?php }?>
<div style="clear:both; height:10px;"><span></span></div>
<div id="charClick1" class="chart"></div>
<div style="clear:both; height:10px;"><span></span></div>
<div id="charClick3" class="chart"></div>
<div style="clear:both; height:10px;"><span></span></div>
<div id="charClick4" class="chart"></div>
<div style="clear:both; height:10px;"><span></span></div>
<div id="charClick2" class="chart"></div>
<br />
<script type="text/javascript">
$(function(){
	$('.tbl-list .row').mouseover(function(){
		$(this).css('background','#ffc');
	});
	$('.tbl-list .row').mouseout(function(){
		$(this).css('background','none');
	});
});
var addCommasNumber=function addCommas(nStr)
{
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
}
   <?php if(count($xNameArr) > 0){?>
   var chart6 = new Highcharts.Chart({
      chart: {
         renderTo: 'charClick1',
         defaultSeriesType: 'spline'
      },
      title: {
         text: 'Thống kê lượng Click theo ngày (từ <?php echo date('d/m/Y', strtotime($fromdate));?> đến <?php echo date('d/m/Y', strtotime($todate));?>)'
      },
      subtitle: {
         text: ''
      },
      xAxis: {
         categories: ['<?php echo implode("','", $xNameArr);?>'],
         tickInterval: <?php $step = (int)(count($xNameArr)/4); echo ($step > 0 ? $step : 1);?>,
		     gridLineWidth: 0
	      },
	      yAxis: {
	         title: {
	            text: 'Số lượng click'
	         },
	         labels: {
	            formatter: function() {
	               return addCommasNumber(this.value)
	            }
	         },
	         min: 0
	      },
	      tooltip: {
	         crosshairs: true,
	         shared: true,
	         formatter: function()
	         {
	             var s = '<b>Ngày '+ this.x +'</b>';
	             $.each(this.points, function(i, point) {
	                 s += '<br/>'+ point.series.name +': <b>'+addCommasNumber(point.y)+'</b>';
	             });
	             
	             return s;
	         }
	      },
	      plotOptions: {
            spline: {
               marker: {
                  enable: false
               }
            }
         },
	      series: [{
	         name: 'Click',
	         data: [<?php echo implode(',', $clickArr);?>]
      }, {
         name: 'Real click',
         data: [<?php echo implode(',', $realClickArr);?>]
      }, {
          name: 'Click charge',
          data: [<?php echo implode(',', $clickChargeArr);?>]
       }],
      exporting: {
          enabled: false
      }
   });
   <?php } else {?>
	$('#charClick1').html('Chưa có dữ liệu trả về');
   <?php }?>
   //Chart impression
   <?php if(count($xNameArr) > 0){?>
   var chart7 = new Highcharts.Chart({
      chart: {
         renderTo: 'charClick3',
         defaultSeriesType: 'spline'
      },
      title: {
         text: 'Thống kê lượng Impressions theo ngày (từ <?php echo date('d/m/Y', strtotime($fromdate));?> đến <?php echo date('d/m/Y', strtotime($todate));?>)'
      },
      subtitle: {
         text: ''
      },
      xAxis: {
         categories: ['<?php echo implode("','", $xNameArr);?>'],
         tickInterval: <?php $step = (int)(count($xNameArr)/4); echo ($step > 0 ? $step : 1);?>,
		     gridLineWidth: 0
	      },
	      yAxis: {
	         title: {
	            text: 'Số lượng Impressions'
	         },
	         labels: {
	            formatter: function() {
	               return addCommasNumber(this.value)
	            }
	         },
	         min: 0
	      },
	      tooltip: {
	         crosshairs: true,
	         shared: true,
	         formatter: function()
	         {
	             var s = '<b>Ngày '+ this.x +'</b>';
	             $.each(this.points, function(i, point) {
	                 s += '<br/>'+ point.series.name +': <b>'+addCommasNumber(point.y)+'</b>';
	             });
	             
	             return s;
	         }
	      },
	      plotOptions: {
            spline: {
               marker: {
                  enable: false
               }
            }
         },
	      series: [{
          name: 'Impression',
          data: [<?php echo implode(',', $viewArr);?>]
       }],
      exporting: {
          enabled: false
      }
   });
   <?php } else {?>
	$('#charClick3').html('Chưa có dữ liệu trả về');
   <?php }?>
   //Bieu do cot
   <?php if(count($chartBar1_label) > 0){?>
   var chart6 = new Highcharts.Chart({
       chart: {
          renderTo: 'charClick4',
          defaultSeriesType: 'column'
       },
       title: {
          text: 'Biểu đồ Click theo nhóm (từ ngày <?php $date = new DateTime($fromdate); echo $date->format('d-m-Y');?> đến ngày <?php $date = new DateTime($todate); echo $date->format('d-m-Y');?>)'
       },
       xAxis: {
          categories: ['<?php echo implode("','", $chartBar1_label);?>'],
          tickInterval: <?php $step = (int)(count($chartBar1_label)/4); echo ($step > 0 ? $step : 1);?>,
          title: {
             text: null
          }
       },
       yAxis: {
          min: 0,
          title: {
             text: 'Số lượng Click',
             align: 'high'
          },
	         labels: {
		            formatter: function() {
		               return addCommasNumber(this.value)
		            }
		     }
       },
       tooltip: {
          formatter: function() {
             return '<b>Ngày '+ this.x +'</b><br />'+
                 this.series.name +': '+ addCommasNumber(this.y) +' clicks';
          }
       },
       plotOptions: {
     	  column: {
               pointPadding: 0.02,
               borderWidth: 0
            }
       },
       credits: {
          enabled: false
       },
       series: [{
          name: 'Khách hàng',
          data: [<?php echo implode(', ', $chartBar1_click_KH);?>],
          color: '#058dc7'
       }, {
          name: 'Nội bộ',
          data: [<?php echo implode(', ', $chartBar1_click_NB);?>],
          color: '#50b432'
       }, {
           name: 'Khách hàng',
           type: 'spline',
           data: [<?php echo implode(', ', $chartBar1_click_KH);?>],
           color: '#058dc7'
        }, {
            name: 'Nội bộ',
            type: 'spline',
            data: [<?php echo implode(', ', $chartBar1_click_NB);?>],
            color: '#50b432'
         }],
       exporting: {
           enabled: false
       }
    });
      //Bieu do ctr
      var chart7 = new Highcharts.Chart({
          chart: {
             renderTo: 'charClick2',
             defaultSeriesType: 'column'
          },
          title: {
             text: 'Biểu đồ CTR theo nhóm (từ ngày <?php $date = new DateTime($fromdate); echo $date->format('d-m-Y');?> đến ngày <?php $date = new DateTime($todate); echo $date->format('d-m-Y');?>)'
          },
          xAxis: {
             categories: ['<?php echo implode("','", $chartBar1_label);?>'],
             tickInterval: <?php $step = (int)(count($chartBar1_label)/4); echo ($step > 0 ? $step : 1);?>,
             title: {
                text: null
             }
          },
          yAxis: {
             min: 0,
             title: {
                text: 'CTR',
                align: 'high'
             }
          },
          tooltip: {
             formatter: function() {
                return '<b>Ngày '+ this.x +'</b><br />'+
                    this.series.name +': '+ this.y;
             }
          },
          plotOptions: {
        	  column: {
                  pointPadding: 0.02,
                  borderWidth: 0
               }
          },
          credits: {
             enabled: false
          },
               series: [{
             name: 'Khách hàng',
             data: [<?php echo implode(', ', $chartBar1_ctr_KH);?>],
             color: '#058dc7'
          }, {
             name: 'Nội bộ',
             data: [<?php echo implode(', ', $chartBar1_ctr_NB);?>],
             color: '#50b432'
          },{
              name: 'Khách hàng',
              type: 'spline',
              data: [<?php echo implode(', ', $chartBar1_ctr_KH);?>],
              color: '#058dc7'
           }, {
              name: 'Nội bộ',
              type: 'spline',
              data: [<?php echo implode(', ', $chartBar1_ctr_NB);?>],
              color: '#50b432'
           }],
          exporting: {
              enabled: false
          }
       });
      <?php } else {?>
    	$('#charClick4, #charClick2').html('Chưa có dữ liệu trả về');
       <?php }?>

<?php if($fromdate == $todate){?>
    $('#comparDate').DatePicker({
   		format:'Y-m-d',
   		date: '<?php echo date('Y-m-d');?>',
   		starts: 1,
   		onChange: function(formated, dates){
   			$('#comparDate').val(formated);
   			$('#comparDate').DatePickerHide();
   			//get data to view
   			var date1 = '<?php echo $fromdate;?>';
   			var date2 = $.trim(formated);
   			$('#loading33').show();
   			$.ajax({
   	   			url: '<?php echo site_url('report/ajaxCompareDateChart/');?>' + '?date1=' + date1 + '&date2=' + date2,
   	   			type: 'GET',
   	   			success: function(data){
   	   	   			$('#loading33').hide();
   	   	   			$('.click_view').html(data);
   	   	   		}
   	   		});
   		}
   	});
<?php }?>
</script>
<div class="click_view"></div>